<template>
  <n-drawer
    v-model:show="showModal"
    width="50%"
    :trap-focus="false"
    :block-scroll="false"
    to=".drawer_container"
    placement="left"
    :on-mask-click="closedDrawer"
    :on-esc="closedDrawer"
  >
    <n-drawer-content>
      <template #header>重置密码</template>
      <n-alert class="mb-3" :title="userInfo.nickName">
        <template #icon>
          <Icon icon="icon-park-twotone:people" />
        </template>
        <p>登录账号：{{ userInfo.userName }}</p>
      </n-alert>
      <n-form ref="formRef" :model="form" :rules="rules">
        <n-form-item label="新密码" path="password">
          <n-input
            v-model:value="form.password"
            show-password-on="click"
            type="password"
            maxlength="20"
            placeholder="请输入密码"
            @input="handlePasswordInput"
          ></n-input>
        </n-form-item>
        <n-form-item ref="pwAgainRef" label="确认密码" path="passwordAgain">
          <n-input
            v-model:value="form.passwordAgain"
            show-password-on="click"
            :disabled="!form.password"
            type="password"
            maxlength="20"
            placeholder="再次输入密码"
          ></n-input>
        </n-form-item>
      </n-form>
      <template #footer>
        <n-button class="mr-3" @click="closedDrawer">取消</n-button>
        <n-button type="primary" :disabled="!form.password || !form.passwordAgain" @click="save">确定</n-button>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>
<script setup lang="ts">
import { resetUserPwd } from '@/service/api/system/user';
import { formRules } from '@/utils/rule';
import { Icon } from '@iconify/vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  userInfo: {
    type: Object,
    default: () => null
  }
});
const showModal = computed(() => props.visible);

const _form = {
  password: '',
  passwordAgain: ''
};
const form = ref({ ..._form });

const pwAgainRef = ref();
function validatePasswordStartwith(_rule: any, value: string) {
  return (
    Boolean(form.value.password) && form.value.password.startsWith(value) && form.value.password.length >= value.length
  );
}
function validatePasswordSame(_rule: any, value: string) {
  return value === form.value.password;
}
const rules = {
  password: formRules.pwd,
  passwordAgain: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: validatePasswordStartwith,
      message: '两次密码输入不一致',
      trigger: ['input']
    },
    {
      validator: validatePasswordSame,
      message: '两次密码输入不一致',
      trigger: ['blur', 'password-input']
    }
  ]
};

const handlePasswordInput = () => {
  if (form.value.passwordAgain) {
    pwAgainRef.value?.validate({ trigger: 'password-input' });
  }
};

// 关闭
const emits = defineEmits(['closed']);
const closedDrawer = () => {
  emits('closed');
  form.value = { ..._form };
};
// 保存
const formRef = ref();
const save = () => {
  formRef.value?.validate((errors: any) => {
    if (!errors) {
      resetUserPwd(props.userInfo.userId, form.value.password).then(() => {
        window.$message?.success('修改成功');
        closedDrawer();
      });
    } else {
      console.log(errors);
    }
  });
};
</script>
